<script setup>
	import { onMounted, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	// 数据
	const cashLimit = ref()
	async function merchantAccount() {
		const res = await http.request({
			url: 'api/user/userMsg',
			method: 'POST',
			data: {},
		})
		console.log(res)
		totalMoney.value = res.data.data.shop_balance
		cashLimit.value = res.data.tx_config
	}

	// 银行卡列表
	const bankId = ref()
	const myCards = ref([])
	async function getCardList() {
		const res = await http.request({
			url: '/api/shop/myBank',
			method: 'POST',
			data: {},
		})
		console.log(res)
		myCards.value = res.data
		bankId.value = myCards.value[0].id
	}

	function chooseCard(id) {
		bankId.value = id
	}

	//删除确认弹窗
	const delcardpopup = ref()
	const delId = ref()
	function remove(id) {
		delId.value = id
		delcardpopup.value.open('center')
	}

	async function delCard() {
		const res = await http.request({
			url: '/api/shop/delBank',
			method: 'POST',
			data: {
				id: delId.value,
			},
		})
		console.log(res)
		if (res.st == 1) {
			uni.utils.toast('删除成功')
			getCardList()
			delcardpopup.value.close('center')
		} else {
			uni.utils.toast(res.msg)
		}
	}

	function cancelDelCard() {
		delcardpopup.value.close('center')
	}

	const totalMoney = ref(0)
	const cashMoney = ref('')

	function cashDetails() {
		uni.navigateTo({
			url: `/minePage/cashdetails/index`,
		})
	}

	function cashAll() {
		cashMoney.value = totalMoney.value
	}

	//添加银行卡
	const cardpopup = ref()
	const card = ref()
	const name = ref()
	const bankName = ref()
	const bankZH = ref()
	function addCard() {
		cardpopup.value.open('top')
	}

	function cancelAdd() {
		card.value = ''
		name.value = ''
		bankName.value = ''
		bankZH.value = ''
		cardpopup.value.close('top')
	}

	async function sureAdd() {
		if (!card.value) {
			uni.utils.toast('请输入银行卡号')
			return
		}
		if (!name.value) {
			uni.utils.toast('请输入银行卡所有者姓名')
			return
		}
		if (!bankName.value) {
			uni.utils.toast('请输入银行卡名称')
			return
		}
		if (!bankZH.value) {
			uni.utils.toast('请输入所属支行')
			return
		}
		const res = await http.request({
			url: '/api/shop/addBank',
			method: 'POST',
			data: {
				card: card.value,
				name: name.value,
				bank_name: bankName.value,
				bank_zh: bankZH.value,
			},
		})
		if (res.st == 1) {
			uni.utils.toast('添加银行卡成功')
			card.value = ''
			name.value = ''
			bankName.value = ''
			bankZH.value = ''
			getCardList()
			cardpopup.value.close('top')
		} else {
			uni.utils.toast(res.msg)
		}
	}

	async function goCash() {
		if (Number(cashMoney.value) > Number(totalMoney.value)) {
			uni.utils.toast('提现金额不可大于可提现金额')
			return
		}
		if (Number(cashMoney.value) < Number(cashLimit.value.min_money)) {
			uni.utils.toast('提现金额不可低于最小提现金额')
			return
		}
		if (Number(cashMoney.value) > Number(cashLimit.value.max_money)) {
			uni.utils.toast('提现金额不可大于最大提现金额')
			return
		}
		if (
			cashMoney.value.split('.')[1] &&
			cashMoney.value.split('.')[1].length > 2
		) {
			uni.utils.toast('提现金额最大两位小数')
			return
		}
		const res = await http.request({
			url: '/api/withdrawal/withdrawalPost',
			method: 'POST',
			data: {
				money: cashMoney.value,
				bank_id: bankId.value,
			},
		})
		if (res.st == 1) {
			await merchantAccount()
			uni.utils.toast('提现申请成功，请等待打款')
			cashMoney.value = ''
		} else {
			uni.utils.toast(res.msg)
		}
	}

	onLoad(() => {
		merchantAccount()
		getCardList()
	})
</script>

<template>
	<view class="account-cash">
		<view class="content">
			<view class="content-title">
				<view class="" style="font-size: 32rpx"> 可提现金额（元) </view>
				<view class="cash-detail" @click="cashDetails"> 提现明细 </view>
			</view>
			<view class="" style="margin-bottom: 32rpx; font-size: 48rpx">
				￥{{ totalMoney }}
			</view>
			<view class="" style="margin-bottom: 13rpx; font-size: 32rpx">
				提现金额
			</view>
			<view class="money">
				<input
					class="moneyinput"
					v-model="cashMoney"
					placeholder="请输入提现金额"
					style=""
				/>
				<view class="cashall" @click="cashAll"> 全部提现 </view>
			</view>
			<view class="tips">
				<view class=""> ·提现手续费0% </view>
				<view class=""> ·每人每日提现限1次数 </view>
				<view class="">
					·每人每日提现单笔最低提现金额<span style="color: #a47dff">{{
						cashLimit.min_money
					}}</span
					>元，最高<span style="color: #a47dff">{{
						cashLimit.max_money
					}}</span
					>元
				</view>
			</view>
			<view class="" style="margin-bottom: 21rpx; font-size: 32rpx">
				提现至：
			</view>
			<view
				class="card-item"
				v-for="(item, index) in myCards"
				:key="item.id"
				@click="chooseCard(item.id)"
			>
				<view
					class="card"
					:class="{ 'card-active': item.id == bankId }"
				>
					<view class="" style="font-size: 28rpx">
						{{ item.bank_name }}
					</view>
					<view class="" style="font-size: 24rpx; color: #808080">
						{{
							`${item.card.substring(
								0,
								6
							)}*********${item.card.slice(-4)}`
						}}
					</view>
				</view>
				<view class="del" @click="remove(item.id)"> </view>
			</view>

			<view class="add-card" @click="addCard">
				<image
					src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/add-box.png"
					style="width: 48rpx; height: 48rpx"
					mode=""
				></image>
				<view
					class=""
					style="margin-left: 20rpx; font-size: 24rpx; color: #808080"
				>
					添加绑定银行卡
				</view>
			</view>
		</view>
		<view class="bottomthing">
			<view
				class=""
				style="width: 412rpx; margin-bottom: 20rpx; font-size: 32rpx"
			>
				• 提现于<span style="color: #a47dff">24小时</span>内到账，<span
					style="color: #a47dff"
					>周一、周三、周五</span
				>可提现<span style="color: #a47dff">2</span>次
			</view>
			<view class="cash-button" @click="goCash"> </view>
		</view>

		<!-- 添加银行卡出层 -->
		<uni-popup ref="cardpopup" type="top">
			<view class="cardpopup-content">
				<view class="add-card-item">
					<view class="item-name"> 姓名 </view>
					<input
						class="add-input"
						v-model="name"
						placeholder="请输入收款人姓名"
					/>
				</view>
				<view class="add-card-item">
					<view class="item-name"> 卡号 </view>
					<input
						class="add-input"
						v-model="card"
						placeholder="请输入请输入银行卡卡号"
					/>
				</view>
				<view class="add-card-item">
					<view class="item-name"> 银行 </view>
					<input
						class="add-input"
						v-model="bankName"
						placeholder="请输入请输入银行名称"
					/>
				</view>
				<view class="add-card-item">
					<view class="item-name"> 支行 </view>
					<input
						class="add-input"
						v-model="bankZH"
						placeholder="请输入所属支行"
					/>
				</view>
				<view class="add-button">
					<view class="button" @click="cancelAdd"> </view>
					<view class="button" @click="sureAdd"> </view>
				</view>
			</view>
		</uni-popup>

		<!-- 添加银行卡出层 -->
		<uni-popup ref="delcardpopup" type="center">
			<view class="delcardpopup-content">
				<view class="del-button">
					<view class="button" @click="cancelDelCard"> </view>
					<view class="button" @click="delCard"> </view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	.account-cash {
		height: 100vh;
		padding-top: 13rpx;
		box-sizing: border-box;
		.content {
			height: 100%;
			width: 100%;
			padding: 31rpx 25rpx;
			box-sizing: border-box;
			border-radius: 14rpx;
			background-color: #fff;
			.content-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 12rpx;
				.cash-detail {
					width: 134rpx;
					height: 53rpx;
					border-radius: 14rpx;
					border: 2rpx solid #c1a6ff;
					text-align: center;
					line-height: 53rpx;
					font-size: 24rpx;
					color: #c1a6ff;
				}
			}
			.money {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.moneyinput {
					width: 530rpx;
					height: 66rpx;
					border-radius: 10rpx;
					box-sizing: border-box;
					padding-left: 32rpx;
					background-color: #f5f5f5;
					font-size: 30rpx;
				}
				.cashall {
					width: 134rpx;
					height: 53rpx;
					border-radius: 14rpx;
					background-color: #a175ff;
					font-size: 28rpx;
					line-height: 53rpx;
					text-align: center;
					color: #fff;
				}
			}
			.tips {
				margin-bottom: 128rpx;
				font-size: 20rpx;
				color: #808080;
			}
			.card-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 29rpx;
				.card {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 80rpx;
					width: 93%;
					padding: 0 20rpx;
					border: 2rpx solid rgba(188, 164, 237, 1);
					box-sizing: border-box;
					border-radius: 14rpx;
				}
				.card-active {
					background-color: #f3edff;
				}
				.del {
					width: 30rpx;
					height: 30rpx;
					background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/del-card.png)
						no-repeat;
					background-size: 100% 100%;
				}
			}
			.add-card {
				display: flex;
				align-items: center;
				width: 93%;
				height: 80rpx;
				border-radius: 14rpx;
				border: 2rpx solid #bca4ed;
				padding: 0 12rpx;
				box-sizing: border-box;
			}
		}
		.bottomthing {
			position: fixed;
			bottom: 40rpx;
			left: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			.cash-button {
				width: 638rpx;
				height: 92rpx;
				background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/cash-button.png)
					no-repeat;
				background-size: 100% 100%;
			}
		}
		.cardpopup-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 450rpx;
			padding-top: 46rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 0rpx 0rpx, 10rpx, 10rpx;
			.add-card-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				padding: 0 46rpx;
				box-sizing: border-box;
				.item-name {
					font-size: 32rpx;
				}
				.add-input {
					width: 80%;
					height: 57rpx;
					margin-bottom: 16rpx;
					border-radius: 18rpx;
					border: 2rpx solid rgba(194, 194, 194, 1);
					box-sizing: border-box;
					line-height: 57rpx;
					text-align: center;
					font-size: 28rpx;
				}
			}
			.add-button {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				padding: 0 157rpx;
				margin-top: 30rpx;
				box-sizing: border-box;
				.button {
					width: 188rpx;
					height: 66rpx;
					background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/card-cancle.png)
						no-repeat;
					background-size: 100% 100%;
					&:last-child {
						background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/card-sure.png)
							no-repeat;
						background-size: 100% 100%;
					}
				}
			}
		}
		.delcardpopup-content {
			position: relative;
			width: 632rpx;
			height: 401rpx;
			background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/del-card-bg.png)
				no-repeat;
			background-size: 100% 100%;
			.del-button {
				position: absolute;
				bottom: 46rpx;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				padding: 0 93rpx;
				box-sizing: border-box;
				.button {
					width: 164rpx;
					height: 82rpx;
					background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/cancle-del-card.png)
						no-repeat;
					background-size: 100% 100%;
					&:last-child {
						background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/mine/sure-del-card.png)
							no-repeat;
						background-size: 100% 100%;
					}
				}
			}
		}
	}
</style>
